import React, { useCallback, useState } from 'react'
import { Tooltip } from 'antd'
import CaseBox from './Box'
import CaseSortTitle from './Title'
import { Scrollbars } from 'react-custom-scrollbars'
import TopTitleBox from './TopTitleBox'

import { textPathMap } from '@/views/utils/statusMap'

import styles from './Case.module.scss'

const imgStyle = {}

const CaseText = ({ data, reinforceType }) => {
  const { 0: origin, 1: adv, 2: def } = textPathMap
  const [contentExceedsHeight, setContentExceedsHeight] = useState(false)
  const scrollStyle = {
    height: 170,
    backgroundColor: ' rgba(15, 29, 53, 0.05)',
  }
  const renderThumb = ({ style, ...props }) => {
    const thumbStyle = {
      width: '3px',
      backgroundColor: 'rgba(15, 29, 53, 0.15)',
      borderRadius: '2px',
    }
    return <div style={{ ...style, ...thumbStyle }} {...props} />
  }
  const renderTrackVertical = useCallback(
    ({ style, ...props }) => {
      const thumbStyle = {
        width: '8px',
        backgroundColor: '#000000',
        height: '100%',
        right: 0,
        width: '3px',

        backgroundColor: contentExceedsHeight
          ? 'rgba(15, 29, 53, 0.05)'
          : 'transparent',
      }
      return <div style={{ ...style, ...thumbStyle }} {...props} />
    },
    [contentExceedsHeight]
  )

  const getResultData = useCallback((nowData) => {
    return (
      <div className={styles.reInforceCase}>
        <Tooltip title={nowData[0]}>
          <p className={styles.reInforceCaseName}>{nowData[0]}</p>
        </Tooltip>
        <p className={styles.boldFont}>
          {Number(nowData[2] * 100).toFixed(1) + '%'}
        </p>
      </div>
    )
  }, [])
  const handleScroll = (values) => {
    // 当内容高度超出容器高度时，显示滚动条的背景色
    if (values.scrollHeight > 170) {
      setContentExceedsHeight(true)
    } else {
      setContentExceedsHeight(false)
    }
  }
  return (
    <div className={styles.imageBox}>
      <CaseBox title={origin[2]}>
        <TopTitleBox>{origin[3]}</TopTitleBox>
        <Scrollbars
          style={scrollStyle}
          renderThumbVertical={renderThumb}
          renderTrackVertical={renderTrackVertical}
          thumbSize={30}
        >
          <div className={styles.textContent}>{data[origin[0]]}</div>
        </Scrollbars>

        <CaseSortTitle>分类结果Top5：</CaseSortTitle>
        {getResultData(data[origin[1]])}
      </CaseBox>
      <CaseBox title={adv[2]}>
        <TopTitleBox>{adv[3]}</TopTitleBox>
        <Scrollbars
          style={scrollStyle}
          renderThumbVertical={renderThumb}
          renderTrackVertical={renderTrackVertical}
          thumbSize={30}
        >
          <div className={styles.textContent}>{data[adv[0]]}</div>
        </Scrollbars>

        <CaseSortTitle>分类结果Top5：</CaseSortTitle>
        {getResultData(data[adv[1]])}
      </CaseBox>
      <CaseBox title={def[2]}>
        <TopTitleBox>{reinforceType ? def[4] : def[3]}</TopTitleBox>
        <Scrollbars
          style={scrollStyle}
          renderThumbVertical={renderThumb}
          renderTrackVertical={renderTrackVertical}
          thumbSize={30}
        >
          <div className={styles.textContent}>{data[def[0]]}</div>
        </Scrollbars>

        <CaseSortTitle>分类结果Top5：</CaseSortTitle>
        {getResultData(data[def[1]])}
      </CaseBox>
    </div>
  )
}
export default CaseText
